<template>
    <sub-box>
        <breadcrumb :title="'导航详情'"></breadcrumb>
        <div class="manager white-block" v-loading="loading">
            <el-form class="form-common" :model.sync="ruleForm" :rules="rules" ref="ruleForm" label-width="1.2rem">
                <el-form-item label="导航链接" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择" class="openWay" @change="change">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="跳转路径" prop="path" v-if="ruleForm.type==1">
                    <el-input v-model="ruleForm.path"></el-input>
                </el-form-item>
                <el-form-item label="选择分类" prop="sort" v-if="ruleForm.type==2">
                    <el-select v-model="ruleForm.sort" placeholder="请选择" class="openWay">
                        <el-option
                            v-for="item in sortTree"
                            :key="item.id"
                            :label="item.categoryName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="浮窗显示" prop="floatShow" v-if="ruleForm.type==2">
                    <el-switch v-model="ruleForm.floatShow"></el-switch>
                </el-form-item>
                <el-form-item label="导航名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="displayStatus">
                    <el-select v-model="ruleForm.displayStatus" placeholder="请选择" class="openWay">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="打开方式" prop="openType">
                    <el-select v-model="ruleForm.openType" placeholder="请选择打开方式" class="openWay">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="text-center btns">
                    <el-button type="primary" size="large" @click="save('ruleForm')">保存</el-button>
                    <el-button size="large" @click="$router.back(-1)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </sub-box>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import subBox from '../../components/layout/layout-sub'

    export default {
        data() {
            return {
                type: '政务超市',
                value1: '显示',
                value2: '当前页面打开',
                input: '',
                input1: '',
                options: [
                    {
                        value: 1,
                        label: '路径（页面）'
                    },
                    {
                        value: 2,
                        label: '分类'
                    }
                ],
                options1: [
                    {
                        value: 0,
                        label: '显示'
                    },
                    {
                        value: 1,
                        label: '隐藏'
                    }
                ],
                options2: [
                    {
                        value: 0,
                        label: '当前页面打开'
                    },
                    {
                        value: 1,
                        label: '新标签页面打开'
                    }
                ],
                sortTree: [],
                ruleForm: {
                    type: 1,
                    path: '',
                    sort: '',
                    floatShow: false,
                    name: '',
                    displayStatus: 0,
                    openType: 0
                },
                rules: {
                    name: [
                        {required: true, message: '请输入导航名称', trigger: 'blur'}
                    ],
                    path: [
                        {required: true, message: '请输入跳转链接', trigger: 'blur'}
                    ],
                    sort: [
                        {required: true, message: '请选择分类', trigger: 'change'}
                    ]
                },
                loading: false,
                id: ''
            }
        },
        mounted() {
            this.id = this.$route.params.id
            this.getList()
            if (this.id) this.getDetail()
        },
        methods: {
            change() {
                this.$refs.ruleForm.clearValidate()
            },
            getList() {
                this.$http.get('/gsCategoryManage/getTree').then(result => {
                    if (result.success) {
                        this.sortTree = result.data
                    }
                })
            },
            validate(formName, list, callback) {
                let i = 0
                this.$refs[formName].validateField(list, (valid) => {
                    i++
                    if (valid) {
                        return false
                    } else {
                        if (callback && i === list.length) callback()
                    }
                })
            },
            save(formName) {
                let list = []
                if (this.ruleForm.type === 1) {
                    list = ['path', 'name']
                } else {
                    list = ['sort', 'name']
                }
                this.validate(formName, list, () => {
                    this.loading = true
                    this.$http.post('/gsNavigation/saveOrUpdateNav', {
                        type: this.ruleForm.type,
                        navigationName: this.ruleForm.name,
                        displayStatus: this.ruleForm.displayStatus,
                        floatShow: this.ruleForm.floatShow ? 1 : 0,
                        id: this.id || '',
                        navigationPath: this.ruleForm.type === 1 ? this.ruleForm.path : this.ruleForm.sort,
                        openType: this.ruleForm.openType
                    }).then(result => {
                        this.loading = false
                        if (result.success) {
                            this.$emit('upload')
                            this.$nextTick(() => {
                                this.$method.historyBack()
                            })
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                })
            },
            getDetail() {
                this.$http.get('/gsNavigation/getById', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        let data = result.data
                        this.ruleForm.name = data.navigationName
                        this.ruleForm.openType = data.openType
                        this.ruleForm.displayStatus = data.displayStatus
                        this.ruleForm.type = Number(data.type)
                        if (this.ruleForm.type === 1) {
                            this.ruleForm.path = data.navigationPath
                        } else {
                            this.ruleForm.sort = Number(data.navigationPath)
                        }
                        if (Number(data.floatShow)) {
                            this.ruleForm.floatShow = true
                        } else {
                            this.ruleForm.floatShow = false
                        }
                    }
                    this.$method.updateView(false, true)
                })
            }
        },
        components: {
            breadcrumb,
            subBox
        }
    }
</script>
<style scoped lang="less">
    /*.box {*/
    /*height: 7.8rem;*/
    /*padding-left: 4.57rem;*/
    /*font-size: .16rem;*/
    /*line-height: .8rem;*/
    /*padding-top: .9rem;*/

    /*span {*/
    /*width: .8rem;*/
    /*padding-right: .2rem;*/
    /*}*/

    /*.select1 {*/
    /*width: 2rem;*/
    /*}*/

    /*.select2 {*/
    /*width: 5.6rem;*/
    /*}*/

    /*.state {*/
    /*padding-left: .3rem;*/
    /*}*/

    /*.input {*/
    /*width: 3.4rem;*/
    /*margin-left: .2rem;*/
    /*}*/

    /*.input1 {*/
    /*width: 5.6rem;*/
    /*}*/

    /*.btn {*/
    /*padding-left: 2rem;*/
    /*margin-top: 1.2rem;*/

    /*.button {*/
    /*width: 1.4rem;*/
    /*height: .5rem;*/
    /*border-radius: 0;*/
    /*}*/

    /*}*/

    /*}*/

    .manager {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .form-common {
        width: 6.4rem;
        margin: 0 auto;
    }

    .openWay {
        width: 100%;
    }
</style>
